<template>
	<div>
		<el-drawer v-model="visible" :size="360">
			<template #header>
				<div>应用配置</div>
			</template>
			<el-alert type="error" :closable="false">
				应用配置可实时预览效果，但仅是临时生效，要想真正作用于项目，可以点击下方的“复制配置”按钮，将配置粘贴到
				public/settings.custom.js 中即可。在生产环境该功能会被隐藏。
			</el-alert>
			<theme-scheme></theme-scheme>
			<nav-mode></nav-mode>
			<nav-setting></nav-setting>
			<v-copyright></v-copyright>
			<v-watermark></v-watermark>
			<v-other></v-other>

			<template #footer>
				<el-button v-copy="copyContent" type="primary" icon="DocumentCopy" class="copy-button">
					复制配置
				</el-button>
			</template>
		</el-drawer>
	</div>
</template>

<script setup>
import { computed } from "vue"
import { useSettingStore } from "/store/setting"
import ThemeScheme from "./components/theme-scheme.vue"
import NavMode from "./components/nav-mode.vue"
import NavSetting from "./components/nav-setting.vue"
import VCopyright from "./components/copyright.vue"
import VWatermark from "./components/watermark.vue"
import VOther from "./components/other.vue"

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
})
const emits = defineEmits(["update:modelValue"])

const visible = computed({
	get() {
		return props.modelValue
	},
	set(value) {
		emits("update:modelValue", value)
	},
})

const settingStore = useSettingStore()
const copyContent = computed(() => {
	const { dark, navigatorType, tab, copyright, componentType, watermark } = settingStore
	return (
		"window.DefaultGlobalSetting = " +
		JSON.stringify(
			{
				dark,
				navigatorType,
				tab,
				copyright,
				componentType,
				watermark,
			},
			null,
			4
		)
	)
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
	padding-bottom: 20px;
	padding-top: 20px;
	border-bottom: 1px solid var(--el-border-color);
	margin-bottom: 0;
}
:deep(.el-drawer__footer) {
	border-top: 1px solid var(--el-border-color);
	padding-top: var(--el-drawer-padding-primary);
}
:deep(.el-divider) {
	margin: 36px 0 24px;
}
:deep(.el-divider .el-divider__text) {
	transition: var(--transition);
}
:deep(.form-item) {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 5px 0;
	padding: 5px 10px;
	border-radius: 5px;
	transition: var(--transition);
	.label {
		color: var(--el-text-color-regular);
		white-space: nowrap;
		line-height: 34px;
	}
	.el-input {
		width: 150px;
	}
	.el-textarea {
		width: 200px;
	}
	.el-radio-group {
		margin-top: 5px;
	}
	.upload {
		width: 100px;
		height: 100px;
		border-radius: 5px;
		border: 1px dashed var(--el-border-color);
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--el-fill-color);
		transition: var(--transition);
		color: inherit;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		.icon {
			color: var(--el-text-color-regular);
			transition: var(--transition);
		}
		.upload-file {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			opacity: 0;
			z-index: 9;
			cursor: pointer;
		}
	}
	.preview {
		width: 100px;
		height: 100px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
		overflow: hidden;
		.icon {
			color: #fff;
			transition: var(--transition);
			position: relative;
			z-index: 3;
			cursor: pointer;
			margin: 0 7px;
			opacity: 0;
			visibility: hidden;
		}
		img {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			z-index: 1;
		}
		&::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			opacity: 0;
			z-index: 2;
			background: #000;
			transition: var(--transition);
		}
	}
	&:hover {
		background: var(--el-fill-color);
		.upload {
			background: var(--el-fill-color-lighter);
		}
		.preview {
			.icon {
				opacity: 1;
				visibility: visible;
			}
			&::before {
				opacity: 0.5;
			}
		}
	}
}
.copy-button {
	display: block;
	width: 100%;
}
</style>
